<template>
	<view class="content">
		<cu-custom bgColor="bg-white" :fanhui="true">
			<block slot="content">秩汇</block>
		</cu-custom>
		<view class="main">
			<view class="main-inner">
				<view class="title">手机号密码登录</view>
				<view class="info">未注册手机验证后自动登录</view>
				<view class="phone">
					<view class="toubu">+ 86</view>
					<view class="xian"></view>
					<view class="input">
						<input type="number" value="" v-model="username"/>
					</view>
				</view>
				<view class="phone">
					<view class="toubu">密码</view>
					<view class="xian"></view>
					<view class="input">
						<input type="password" value="" v-model="password"/>
					</view>
				</view>
				<view class="button">
					<button class="shouji-btn" @click="toWeixin" style="margin: 0.3rem 0.6rem;">登录</button>
				</view>
				<view class="back-box">
					<view class="back" @click="back">注册账号</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'18888888888',
				password:'123456'
			};
		},
		methods: {
			toWeixin() {
				//自定义封装登录函数
				if (this.username === '') {
					uni.showToast({
						title: '用户名为空',
						duration: 1500
					});
				} else if (this.password === '') {
					uni.showToast({
						title: '密码为空',
						duration: 1500
					});
				} else {
					var data = {
						phone: this.username,
						password: this.password
					}
					this.http.Loginpost('/sys/userExe/login', data)
						.then(res => {
							console.log(res)
							if (res.data.code === 401 || res.data.code === 400) {
								uni.showToast({
									title: '密码错误!',
									duration: 1500
								});
							}
							uni.setStorageSync("userinfo", res.data.result.user)
							uni.setStorageSync("token", res.data.result.token)
							uni.showToast({
								title: '登录成功!',
								duration: 1500
							});
							uni.switchTab({
								url: '/pages/index1/index1'
							})
						})
						.catch(err => {
							console.log(err)
						})
				}

			},
			back() {
				uni.navigateTo({
					url: '../register/register'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;

		// background-color: #FFFFFF;
		.main {
			width: 100%;
			display: flex;
			justify-content: center;


			.main-inner {
				width: 80%;
				height: 700upx;
				position: relative;
				top: 100upx;

				.title {
					font-size: 60upx;
				}

				.info {
					font-size: 30upx;
					color: #CCCCCC;
				}

				.phone {
					// position: relative;
					display: flex;

					width: 100%;
					height: 60upx;
					margin-top: 100upx;
					// background-color: #0081FF;
					border-bottom: 1px solid #333333;

					.toubu {
						height: 100upx;
						text-align: 100upx;
						font-size: 40upx;
						// padding-top: 50%;
					}

					.xian {
						margin-left: 5%;
						margin-top: 1.2%;
						height: 30upx;
						width: 1px;
						background-color: #8799A3;
					}

					.input {
						margin-left: 8%;
					}
				}

				.button {
					margin-top: 60upx;

					.shouji-btn {
						background-color: #B1D0FC;
						color: #FFFFFF;
					}
				}

				.back-box {
					margin-top: 40upx;
					display: flex;
					justify-content: center;

					.back {
						width: 19%;
					}
				}
			}
		}
	}
</style>
